<div class="module-register" :class="{'module-register--xibanya':$i18n.locale === 'es'}">
    <template v-if="isLoading === true">
        <div class="m-loading-box">
            <loading></loading>
        </div>
    </template>

    <template v-if="isLoading === false">
        <web-box :title="$t('webBoxPCTitle')" :mobileTit="$t('webBoxTitle')">
            <!-- <div class="register_nav">
                <button class="ui-btn" :class="type == 'phone' ? '' : 'ui-btn--default'"
                    @click="type = 'phone';rules.$reload()">手机注册</button>
                <button class="ui-btn" :class="type == 'email' ? '' : 'ui-btn--default'"
                    @click="type = 'email';rules.$reload()">邮箱注册</button>
            </div> -->
            <!-- <div class="module-register" v-if="type == 'email'">
                <validator :rules="rules" :parent="_self">
                    <form v-if="true" class="m-form-page m-form-login" name="form" action="javascript:;">
                        <div class="col-row fn-flex">
                            <label class="row-title">{{$t('common.email')}}</label>
                            <input type="text" tabindex="1" :placeholder="$t('common.pEmail')" name="email"
                                v-model="form.email" ref="loginNum" @focus="statEmail" class="input stat-email">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex">
                            <label class="row-title">{{$t('common.loginPassword')}}</label>
                            <input type="password" tabindex="2" :placeholder="$t('common.pPass')" autocomplete="off"
                                v-model="form.setPsd" name="setPsd" ref="loginPsd" @focus="checkPsd"
                                @blur="checkPsdBlur" class="input">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex">
                            <label class="row-title">{{$t('common.confirmPwd')}}</label>
                            <input type="password" tabindex="3" :placeholder="$t('common.confirmPassRequireTipShort')"
                                autocomplete="off" v-model="form.confirmNewPwd" name="confirmNewPwd" @focus="reCheckPsd"
                                class="input">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex" v-if="!noCode">
                            <label class="row-title">{{$t('inviteCodeLabel')}}</label>
                            <input type="text" tabindex="4" :placeholder="$t('placeholderInviteCode')" name="inviteCode"
                                v-model="form.inviteCode" maxlength="8" class="input">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex" v-if="noCode">
                            <label class="row-title">{{$t('inviteCodeLabel')}}</label>
                            <input type="text" tabindex="4" :placeholder="$t('placeholderInviteCode')" name="inviteCode"
                                v-model="form.inviteCode" maxlength="8" class="input" readonly="readonly">
                            <div class="ui-tip"></div>
                        </div> -->
            <!--<div class="col-row">-->
            <!--<label class="label">-->
            <!--<input type="checkbox"-->
            <!--class="check-left"-->
            <!--id="agree"-->
            <!--name="agree"-->
            <!--style="height: auto; vertical-align: middle"-->
            <!--@change="changeAgree">-->
            <!--<span class="text" style="vertical-align: middle">{{$t('agree')}}</span>-->
            <!--<a href="/cn/about.html#/use-terms"-->
            <!--v-if="lib.isMobile() === false"-->
            <!--class="text"-->
            <!--style="vertical-align: middle;" target="_blank">{{$t('term')}}</a>-->
            <!--<a href="/cn/m_use_term.html"-->
            <!--v-if="lib.isMobile() === true"-->
            <!--class="text"-->
            <!--style="vertical-align: middle;">{{$t('term')}}</a>-->
            <!--</label>-->
            <!--</div>-->
            <!-- <div class="col-row">
                            <button type="submit" class="ui-btn ui-btn--block  submit-btn" v-if="isRequesting === false"
                                tabindex="5" @click="submit()">{{$t('createAccount')}}</button> -->
            <!--<button type="submit"-->
            <!--tabindex="6"-->
            <!--@click="submit"-->
            <!--class="ui-btn ui-btn&#45;&#45;block">-->
            <!--{{$t('createAccount')}}-->
            <!--</button>-->
            <!-- <button type="submit" class="ui-btn  ui-btn--block  submit-btn" disabled
                                v-if="isRequesting === true">{{ $t('common.waiting') }}...
                            </button>
                        </div>
                        <div class="col-row fn-ta-center" style="margin-bottom: 40px">
                            {{$t('haveAccount')}} <a href="javascript:;" class="link link-login" @click="goToLogin">
                                {{$t('common.signIn')}} </a>
                        </div>
                    </form>
                </validator>
            </div> -->
            <div class="module-register">
                <validator :rules="rules" :parent="_self">
                    <form v-if="true" class="m-form-page m-form-login login-form" name="form" action="javascript:;">
                        <div class="col-row fn-flex" style="position: relative;">
                            <!-- <select  style="width: 180px;position: absolute; left: -200px;">
                                <option v-for="item in form.addressList" :value="item.tel">{{ item.cn }}({{ item.tel }})
                                </option>
                            </select> -->
                            <label class="row-title">手机号</label>
                            <div class="p-input">
                                <div @click="select" class="w-input" style="position: relative;">
                                    <input class="s-input" type="text" v-model="form.areaCode" readonly>
                                    <i :class="[rotate?'normal':'trans']" class="icon icon-arrow-down"
                                        style="position: absolute; right: 0px;color: #fff;top:9px;margin-right: 10px;"></i>
                                </div>
                                <input type="text" tabindex="1" placeholder="请输入手机号码" name="phone" v-model="form.phone"
                                    ref="loginNum" class="input stat-email">
                            </div>
                            <ul class="country" v-show="isCountry">
                                <li @click="country(item.tel)" v-for="item in form.addressList">
                                    {{ item.cn }}({{ item.tel }})</li>
                            </ul>
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex">
                            <label class="row-title">图形验证码</label>
                            <div class="comp-verify-code">
                                <a href="javascript:;">
                                    <img :src="imgCodeSrc" @click="changeImgCode()" width="112" height="32"
                                        style="border-radius:4px;">
                                </a>
                            </div>
                            <input type="text" tabindex="2" :placeholder="$t('common.pCaptcha')" name="imgCode"
                                maxlength="4" autocomplete="off" v-model="form.imgCode" class="input-left">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex">
                            <label class="row-title">获取手机验证码</label>
                            <div class="comp-verify-code">
                                <a href="javascript:;" tabindex="3" v-if="sendingCode===false"
                                    class="ui-btn ui-btn--gray ui-btn--block link" @click="sendCode()"
                                    :disabled="codeLock === true">
                                    {{codeBtnText}}
                                </a>
                                <a href="javascript:;" v-if="sendingCode===true"
                                    class="ui-btn ui-btn--gray ui-btn--block link" disabled>
                                    {{$t('common.waiting')}}...
                                </a>
                            </div>
                            <input type="text" tabindex="3" :placeholder="$t('common.pVerification')"
                                v-model="form.identifyingCode" name="identifyingCode" maxlength="6" class="input-left">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex">
                            <label class="row-title">{{$t('common.loginPassword')}}</label>
                            <input type="password" tabindex="2" :placeholder="$t('common.pPass')" autocomplete="off"
                                v-model="form.setPsd" name="setPsd" ref="loginPsd" @focus="checkPsd"
                                @blur="checkPsdBlur" class="input">
                            <div class="ui-tip"></div>
                        </div>

                        <div class="col-row fn-flex">
                            <label class="row-title">{{$t('common.confirmPwd')}}</label>
                            <input type="password" tabindex="3" :placeholder="$t('common.confirmPassRequireTipShort')"
                                autocomplete="off" v-model="form.confirmNewPwd" name="confirmNewPwd" @focus="reCheckPsd"
                                class="input">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex" v-if="!noCode">
                            <label class="row-title">{{$t('inviteCodeLabel')}}</label>
                            <input type="text" tabindex="4" :placeholder="$t('placeholderInviteCode')" name="inviteCode"
                                v-model="form.inviteCode" maxlength="8" class="input">
                            <div class="ui-tip"></div>
                        </div>
                        <div class="col-row fn-flex" v-if="noCode">
                            <label class="row-title">{{$t('inviteCodeLabel')}}</label>
                            <input type="text" tabindex="4" :placeholder="$t('placeholderInviteCode')" name="inviteCode"
                                v-model="form.inviteCode" maxlength="8" class="input" readonly="readonly">
                            <div class="ui-tip"></div>
                        </div>
                        <!-- <div style="color: #ccc;margin-bottom: 26px;margin-top: -30px;">如果要申请成为超级节点，请勿填写邀请码</div> -->
                        <div class="col-row">
                            <div class="xieyi">注册即同意 <a @click="agreement()">《SMART注册协议》</a>
                            </div>
                            <button type="submit" class="ui-btn ui-btn--block  submit-btn" v-if="isRequesting === false"
                                tabindex="5" @click="submit()">{{$t('createAccount')}}</button>
                            <button type="submit" class="ui-btn  ui-btn--block  submit-btn" disabled
                                v-if="isRequesting === true">{{ $t('common.waiting') }}...
                            </button>
                        </div>
                        <div class="col-row fn-ta-center tip" style="margin-bottom: 40px">
                            {{$t('haveAccount')}} <a href="javascript:;" class="link link-login" @click="goToLogin">
                                {{$t('common.signIn')}} </a>
                        </div>
                    </form>
                </validator>
                <agreement ref='agree'></agreement>
            </div>
        </web-box>
    </template>
</div>